import React, { useEffect, useState } from "react";
import { Button, Drawer, Input, message, Popconfirm, Space, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import '../css/Bookmanagement.css';
import axios from "axios";
import AddBooks from "../compoments/AddBooks";
import EditBooks from "../compoments/EditBooks";
import DeleteBooks from "../compoments/DelectBooks";
interface DataType {
  id: number;
  name: string;
  numbering: number;
  sort: string;
  synopsis?: string;
}
// interface ColumnsType {
//   title: string;
//   dataIndex: string;
//   className?: string;
// }
const { Search } = Input;

function Bookmanagement() {


  //获取所有书籍列表
  //总条数
  const [totalPage, setTotalPage] = useState<number>(10);
  async function allbooks() {
    const res = await axios.get('http://localhost:7001/getallbooks')
    setTotalPage(res.data.length)
    // console.log('000',res,totalPage,res.data.length);
  }
  //分页获取书籍列表
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const [bookslist, setBookslist] = useState<DataType[]>([]);
  async function getbookslist(page, pageSize) {
    const res = await axios.get('http://localhost:7001/getbookslist', {
      params: {
        nowPage: page,
        maxResult: pageSize,
      }
    });
    setPage(page);
    setPageSize(pageSize)
    setBookslist(res.data)
    // console.log('111', res);
  }

  //点击搜索函数
  const onSearch = async (value) => {
    // console.log(value,'1111');
    const res = await axios.get(`http://localhost:7001/searchBooks`,
      {
        params: {
          value: value
        }
      }
    )
    // console.log(res);
    setBookslist(res.data)
  };

  //增加书籍抽屉
  const [visible, setVisible] = useState(false);
  const showDrawer = () => {
    setVisible(true);
  };
  //关闭添加抽屉
  const onClose = () => {
    setVisible(false);
  };


  const [record, setRecord] = useState({});
  //编辑书籍信息
  function editbooks() {
    // console.log(record);
    setRecord(record)
    setEditVisible(true);
  }
  //编辑书籍抽屉
  const [editvisible, setEditVisible] = useState(false);
  //  const showEditDrawer = () => {
  //    setEditVisible(true);
  //  };
  //关闭编辑抽屉
  const onEditClose = () => {
    setRecord({})
    setEditVisible(false);
  };

// 加定时器解决反复快速执行导致页面鬼畜问题
useEffect(function () {
  const timer = setTimeout(() => {
    getbookslist(page, pageSize)
    allbooks()
    // console.log('111');
  }, 1000)
  return () => clearTimeout(timer)
  // console.log('11');
},[{bookslist}]);

  return (
    <div className="all">
      <div className="head">
        <Space direction="vertical">
          <Search placeholder="input search text" onSearch={onSearch} enterButton />
        </Space>
        <Button type="primary" shape="round" icon={<PlusOutlined />} size='middle' className="addbut"
          onClick={showDrawer} >
          添加图书
        </Button>
        <Drawer title="添加书籍" placement="right" onClose={onClose} visible={visible}>
          {/* 添加右侧抽屉弹窗 */}
          <AddBooks addsetvisible={setVisible} />
        </Drawer>

        <Drawer title="修改书籍" placement="right" onClose={onEditClose} visible={editvisible}>
          {/* 编辑右侧抽屉弹窗 */}
          <EditBooks editSetvisible={setEditVisible} editrecord={record} />
        </Drawer>
      </div>


      <Table
        // columns={columns}//表格列的配置描述
        dataSource={bookslist}//数据数组
        rowKey={'id'}
        bordered //是否展示外边框和列边框
        //分页器
        pagination={{
          position: ['bottomCenter'],
          defaultCurrent: 1,
          total: totalPage,
          onChange: getbookslist
        }}

        onRow={record => {
          return {
            onClick: event => {
              // console.log(record);
              setRecord(record)
            }, // 点击行
          };
        }}
      >
        <Table.Column
          title={'id'}
          dataIndex={'id'}
          width={'55px'}
          align={'center'}
        />
        <Table.Column
          title={'书名'}
          dataIndex={'name'}
          width={'220px'}
          ellipsis
        />
        <Table.Column
          title={'编号'}
          dataIndex={'numbering'}
          width={'80px'}
          align={'center'}
        />
        <Table.Column
          title={'类别'}
          dataIndex={'sort'}
          width={'120px'}
          align={'center'}
        />
        <Table.Column
          title={'简介'}
          dataIndex={'synopsis'}
          className={'synopsis'}
          ellipsis
        />
        <Table.Column
          title={'操作'}
          dataIndex={'operate'}
          width={'220px'}
          align={'center'}
          render={() => (<Space>
            <Button type="primary" shape="round" onClick={editbooks}>编辑</Button>
            <DeleteBooks derecord={record} />
          </Space>)}
        />

      </Table>
    </div>
  );
}
export default Bookmanagement;